<template>
  <el-container>
    <el-header class="fix-top">
      <el-row type="flex" align="middle" justify="center" style="position: relative; height: 100%">
        <el-col :span="10">
          <p class="logo-sty">掌上饥荒后台管理</p>
        </el-col>
        <el-col :span="14" :push="6">
          <el-radio-group v-model="radio" size="mini">
            <el-radio-button label="DS"></el-radio-button>
            <el-radio-button label="ROG"></el-radio-button>
            <el-radio-button label="DST"></el-radio-button>
            <el-radio-button label="SW"></el-radio-button>
            <el-radio-button label="HAMLET"></el-radio-button>
          </el-radio-group>
          <el-button type="danger" size="mini" style="margin-left: 12px" @click="out">{{ userInfo.userName }}，退出登录
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="fix-left">
        <el-menu :default-active="currentActive" class="el-menu-vertical-demo" router>
          <el-menu-item index="/" v-if="userInfo.authorityList.includes('1')">
            <i class="el-icon-search"></i>
            <span slot="title">搜索</span>
          </el-menu-item>
          <el-submenu index="1" v-if="userInfo.authorityList.includes('0')">
            <template slot="title">
              <i class="el-icon-news"></i>
              <span>动态</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/articleList">饥荒动态</el-menu-item>
              <el-menu-item index="/friend-list">找饥友</el-menu-item>
              <el-menu-item index="/">广告位设置（待开发）</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" v-if="userInfo.authorityList.includes('1')">
            <template slot="title">
              <i class="el-icon-guide"></i>
              <span>熔炉</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/ForgeHeroList">人物</el-menu-item>
              <el-menu-item index="/AniList">生物</el-menu-item>
              <el-menu-item index="/EquList">装备</el-menu-item>
              <el-menu-item index="/AchList">成就</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" v-if="userInfo.authorityList.includes('1')">
            <template slot="title">
              <i class="el-icon-s-management"></i>
              <span>基础百科</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/heroList">人物</el-menu-item>
              <el-menu-item index="/techList">制作</el-menu-item>
              <el-menu-item index="/recipe-list">食谱</el-menu-item>
              <el-menu-item index="/animal-list">生物</el-menu-item>
              <el-menu-item index="/nature-list">自然</el-menu-item>
              <el-menu-item index="/mechanism-list">机制</el-menu-item>
              <el-menu-item index="/GeographyList">地理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" v-if="userInfo.authorityList.includes('2')">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>应用设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="tag">标签</el-menu-item>
              <el-menu-item index="config">管理员权限</el-menu-item>
              <el-menu-item index="logs">日志列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5" v-if="userInfo.authorityList.includes('3')">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>Mod</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/modList">Mod列表</el-menu-item>
              <el-menu-item index="/mods/playerSearch">玩家搜索</el-menu-item>
              <!-- <el-menu-item index="/mods/skinSale">皮肤售卖统计</el-menu-item> -->
              <el-menu-item index="/mods/cdkList">CDK</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/skin-list" v-if="userInfo.authorityList.includes('1')">
            <i class="el-icon-shopping-bag-2"></i>
            <span slot="title">皮肤</span>
          </el-menu-item>
          <el-menu-item index="/feed-back-list" v-if="userInfo.authorityList.includes('1')">
            <i class="el-icon-info"></i>
            <span slot="title">反馈</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <el-breadcrumb class="breadcrumb-fixed" separator="/">
          <el-breadcrumb-item v-if="userInfo.authorityList.includes('1')" :to="{ path: '/' }">搜索</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: bread[0].path }" v-if="bread[0]">{{
            bread[0].name
          }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: bread[1].path }" v-if="bread[1]">{{
            bread[1].name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="content">
          <slot name="content"></slot>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      radio: this.$store.state.version,
      bread: [],
      currentActive: "",
    };
  },
  watch: {
    radio(newValue) {
      this.changeVersion(newValue);
    },
    $route: function () {
      this.getBread();
      this.currentActive = this.$route.path;
    },
  },
  computed: {
    userInfo() {
      return JSON.parse(this.$store.state.isLogin);
    },
  },
  methods: {
    ...mapMutations(["changeVersion", "changeLoginStatus"]),
    /**
     * @description 退出登录
     */
    out() {
      this.changeLoginStatus(null);
    },
    /**
     * 根据路由获取面包屑及路由
     */
    getBread: function () {
      let secondary = this.$route.meta.secondary;
      let thirdLevel = this.$route.meta.thirdLevel;
      if (!secondary && !thirdLevel) {
        this.bread = [];
      }
      if (secondary) {
        this.bread.splice(1, 1);
        this.bread[0] = {
          path: this.$route.path,
          name: this.$route.meta.secondary,
        };
      }
      if (thirdLevel) {
        this.bread[1] = {
          path: this.$route.path,
          name: this.$route.meta.thirdLevel,
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles.scss";
$aside-width: 300px;
$header-height: 60px;

.fix-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  width: 100%;
  background-color: #515a6e;
}

.fix-left {
  position: fixed;
  top: $header-height;
  left: 0;
  z-index: 800;
  width: 100%;
  height: calc(100vh - 60px);
  background-color: #ffffff;
}

.breadcrumb-fixed {
  position: fixed;
  top: $header-height;
  left: $aside-width;
  z-index: 800;
  padding: 12px 20px 12px 20px;
  width: 100%;
  background-color: $bg;
}

.content {
  margin-top: 18px;
  width: 100%;
  min-height: 100vh;
  border: 1px solid $line-color;
  border-radius: 4px;
  background-color: white;
  overflow: hidden;
}

.main-content {
  margin-top: $header-height;
  margin-left: $aside-width;
  background-color: $bg;
  overflow: hidden;
}

.logo-sty {
  position: relative;
  display: inline-block;
  padding: 8px 16px 8px 16px;
  width: auto;
  background-color: #5b6270;
  border-radius: 4px;
  color: #bbbbbb;
}
</style>